import { BasicColumn, FormProps } from '@/components/Table';
import { formatToDate } from '@/utils/dateUtil';
import { FormSchema } from '@/components/Form';
import { getLabelByValue, sexTypeOption, roleTypeOption, addSuffix } from './help/dict';
import { uploadApi } from '@/api/sys/upload';
import { Input } from 'ant-design-vue';

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
  };
}

/**
 * 配置表格SearchForm字段
 */
export const formConfig: Partial<FormProps> = {
  labelWidth: 100,
  baseColProps: {
    span: 8,
  },
  schemas: [
    {
      field: 'userName',
      label: '账号',
      component: 'Input',
    },
    {
      field: 'sex',
      label: '性别',
      component: 'Select',
      componentProps: {
        options: sexTypeOption,
      },
    },
    {
      field: 'type',
      label: '角色',
      component: 'Select',
      componentProps: {
        options: roleTypeOption,
      },
    },
  ],
};

/**
 * 配置表格表头字段
 */
export const columns: BasicColumn[] = [
  {
    title: 'ID',
    width: 200,
    dataIndex: 'id',
    defaultHidden: true,
  },
  {
    title: '账号',
    width: 200,
    dataIndex: 'userName',
  },
  {
    title: '昵称',
    width: 200,
    dataIndex: 'name',
  },
  {
    title: '密码',
    width: 200,
    dataIndex: 'pwd',
    customRender: ({ record }) => <Input.Password value={record.pwd} disabled/>,
    // defaultHidden: true,
  },
  {
    title: '性别',
    width: 100,
    dataIndex: 'sex',
    customRender: ({ record }) => getLabelByValue(record.sex, sexTypeOption),
  },
  {
    title: '角色',
    width: 200,
    dataIndex: 'type',
    customRender: ({ record }) => getLabelByValue(record.type, roleTypeOption),
  },
  {
    title: '手机号',
    width: 200,
    dataIndex: 'phone',
  },
  {
    title: '年龄',
    width: 200,
    dataIndex: 'age',
  },
  {
    title: '身高',
    width: 200,
    dataIndex: 'height',
    customRender: ({ record }) => addSuffix(record.height, 'cm'),
  },
  {
    title: '体重',
    width: 200,
    dataIndex: 'weight',
    customRender: ({ record }) => addSuffix(record.weight, 'kg'),
  },
  // {
  //   title: '头像',
  //   width: 200,
  //   dataIndex: 'avatar',
  //   customRender: ({ record }) => {
  //     return <img width={100} src={record.avatar}></img>;
  //   },
  // },
];

/**
 * form配置
 */
export const schemas: FormSchema[] = [
  {
    field: 'id',
    component: 'Input',
    label: 'ID',
    colProps: {
      span: 20,
    },
    componentProps: {
      disabled: true,
    },
    ifShow: false,
  },
  {
    field: 'userName',
    component: 'Input',
    label: '账号',
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '账号不能为空' }],
  },
  {
    field: 'name',
    component: 'Input',
    label: '昵称',
    colProps: {
      span: 20,
    },
  },
  {
    field: 'pwd',
    component: 'StrengthMeter',
    label: '密码',
    colProps: {
      span: 20,
    },
    rules: [{ required: true, message: '密码不能为空' }],
  },

  {
    field: 'sex',
    component: 'Select',
    label: '性别',
    colProps: {
      span: 20,
    },
    componentProps: {
      options: sexTypeOption,
    },
  },
  {
    field: 'type',
    component: 'RadioGroup',
    label: '角色',
    colProps: {
      span: 20,
    },
    componentProps: {
      options: roleTypeOption,
    },
    rules: [{ required: true, message: '角色不能为空' }],
  },
  {
    field: 'phone',
    component: 'InputNumber',
    label: '手机号',
    colProps: {
      span: 20,
    },
  },
  {
    field: 'age',
    component: 'InputNumber',
    label: '年龄',
    colProps: {
      span: 20,
    },
  },
  {
    field: 'height',
    component: 'InputNumber',
    label: '身高',
    colProps: {
      span: 20,
    },
    componentProps: {
      addonAfter: 'cm',
    },
  },

  {
    field: 'weight',
    component: 'InputNumber',
    label: '体重',
    colProps: {
      span: 20,
    },
    componentProps: {
      addonAfter: 'kg',
    },
  },

  // {
  //   field: 'cover',
  //   component: 'ImageUpload',
  //   label: '课程封面',
  //   colProps: {
  //     span: 20,
  //   },
  //   // rules: [{ required: true, message: '请上传课程封面' }],
  //   componentProps: {
  //     api: uploadApi,
  //   },
  // },
];

/**
 * table数据
 * @returns
 */
export function initData() {
  return [
    {
      id: '1',
      jlUid: '1',
      name: '增肌计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/8c7b47fe496417d779dd21042b8508b0.jpg',
      type: '0',
      frequency: '0',
      duration: '10',
      createTime: '20200701',
      context: '增肌计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '跑步计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/128b08805076d7eab6e3e96c872377aa.jpg',
      type: '1',
      frequency: '1',
      duration: '10',
      createTime: '20200701',
      context: '跑步计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '跳神计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/128b08805076d7eab6e3e96c872377aa.jpg',
      type: '1',
      frequency: '0',
      duration: '10',
      createTime: '20200701',
      context: '跳神计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '睡眠计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/128b08805076d7eab6e3e96c872377aa.jpg',
      type: '4',
      frequency: '2',
      duration: '10',
      createTime: '20200701',
      context: '睡眠计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '瑜伽计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/a7d73ec8ba3962f8ab48e77362958474.jpg',
      type: '3',
      frequency: '3',
      duration: '10',
      createTime: '20200701',
      context: '瑜伽计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '体测速成计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/128b08805076d7eab6e3e96c872377aa.jpg',
      type: '2',
      frequency: '0',
      duration: '10',
      createTime: '20200701',
      context: '体测速成计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
    {
      jlUid: '1',
      name: '21天猛男计划',
      cover: 'https://www.lesmills.com.cn/uploads/20211207/128b08805076d7eab6e3e96c872377aa.jpg',
      type: '2',
      frequency: '0',
      duration: '10',
      createTime: '20200701',
      context: '21天猛男计划，适合所有肌肉群，包括小腿、大腿、手臂、背部等。',
    },
  ];
}
